<template>
  <div>
    <el-button-group style="margin-bottom: 20px">
      <el-button @click="dataWarn">数据预警</el-button>
      <el-button @click="earlyWarn">设备预警</el-button>
    </el-button-group>
    <el-form inline :model="form">
      <el-form-item label="接收人">
        <el-input
          placeholder="请输入接收人"
          v-model="form.receivePerson"
        ></el-input>
      </el-form-item>
      <el-form-item label="监测体名称">
        <el-select
          v-model="form.monitorId"
          size="medium"
          clearable
          placeholder="选择监测体名称"
        >
          <el-option
            v-for="(item, index) in monitorList"
            :key="index"
            :label="item.value"
            :value="Number(item.key)"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="info" size="medium" @click="search(1)">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" size="medium" @click="set">设置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" stripe v-loading="loading">
      <el-table-column
        label="接收人"
        prop="receiveMan"
        align="center"
      ></el-table-column>
      <el-table-column
        label="单位"
        prop="company"
        align="center"
      ></el-table-column>
      <el-table-column
        label="职务"
        prop="post"
        align="center"
      ></el-table-column>
      <el-table-column label="预警类型" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.warningType == '00'">数据</span>
          <span v-if="scope.row.warningType == '01'">设备</span>
        </template>
      </el-table-column>
      <el-table-column
        label="监测体名称"
        prop="monitorName"
        align="center"
      ></el-table-column>
      <el-table-column
        label="手机号"
        prop="phone"
        align="center"
      ></el-table-column>
      <el-table-column
        label="邮箱号"
        prop="email"
        align="center"
      ></el-table-column>
      <el-table-column
        label="创建时间"
        prop="createTime"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-link type="primary" :underline="false" @click="modify(scope.row)"
            >修改</el-link
          >&nbsp;
          <el-link type="primary" :underline="false" @click="del(scope.row)"
            >删除</el-link
          >
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end">
      <el-col :span="10">
        <el-pagination
          background
          :current-page="pageData.currentPage"
          layout="total, prev, pager, next, jumper"
          :total="pageData.count"
          :page-size="pageData.pageSize"
          @current-change="handleCurrentChange"
          v-if="pageData.count && pageData.count != 0"
        >
        </el-pagination>
      </el-col>
    </el-row>
    <el-dialog
      title="增加预警通知"
      :visible.sync="addWarningNotice"
      width="25%"
    >
      <el-form
        :model="addForm"
        ref="addForm"
        :rules="rules"
        size="medium"
        label-position="left"
        label-width="100px"
      >
        <el-form-item label="接收人" prop="receiveMan">
          <el-input
            v-model="addForm.receiveMan"
            placeholder="请输入接收人"
          ></el-input>
        </el-form-item>
        <el-form-item label="单位" prop="company">
          <el-input
            v-model="addForm.company"
            placeholder="请输入单位"
          ></el-input>
        </el-form-item>
        <el-form-item label="职务" prop="post">
          <el-input v-model="addForm.post" placeholder="请输入职务"></el-input>
        </el-form-item>
        <el-form-item label="监测体">
          <el-select
            v-model="addForm.monitorId"
            size="medium"
            clearable
            placeholder="请选择监测体"
            style="display: flex"
          >
            <el-option
              v-for="(item, index) in monitorList"
              :key="index"
              :label="item.value"
              :value="Number(item.key)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input
            v-model="addForm.phone"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱号" prop="email">
          <el-input
            v-model="addForm.email"
            placeholder="请输入邮箱号"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addWarningNotice = false">取 消</el-button>
        <el-button type="primary" @click="handle">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="修改预警通知"
      :visible.sync="modifyWarningNotice"
      width="25%"
    >
      <el-form
        :model="modifyForm"
        ref="modifyForm"
        :rules="rules"
        size="medium"
        label-position="left"
        label-width="100px"
      >
        <el-form-item label="接收人" prop="receiveMan">
          <el-input
            v-model="modifyForm.receiveMan"
            placeholder="请输入接收人"
          ></el-input>
        </el-form-item>
        <el-form-item label="单位" prop="company">
          <el-input
            v-model="modifyForm.company"
            placeholder="请输入单位"
          ></el-input>
        </el-form-item>
        <el-form-item label="职务" prop="post">
          <el-input
            v-model="modifyForm.post"
            placeholder="请输入职务"
          ></el-input>
        </el-form-item>
        <el-form-item label="监测体">
          <el-select
            v-model="modifyForm.monitorId"
            size="medium"
            clearable
            placeholder="请选择监测体"
            style="display: flex"
            disabled
          >
            <el-option
              v-for="(item, index) in monitorList"
              :key="index"
              :label="item.value"
              :value="Number(item.key)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input
            v-model="modifyForm.phone"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱号" prop="email">
          <el-input
            v-model="modifyForm.email"
            placeholder="请输入邮箱号"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modifyWarningNotice = false">取 消</el-button>
        <el-button type="primary" @click="handle2">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Axios from "axios";
import moment from "moment";
import * as serviceApi from "../../../common/service.config";
Axios.defaults.withcredentials = true;

export default {
  name: "SatelliteService",
  data() {
    return {
      warningType: "00",
      monitorList: null,
      form: {
        receivePerson: "",
        monitorId: "",
      },
      tableData: null,
      pageData: {
        currentPage: null,
        count: null,
        pageSize: null,
      },
      addWarningNotice: false,
      addForm: {
        receiveMan: "",
        company: "",
        post: "",
        monitorId: "",
        phone: "",
        email: "",
      },
      modifyWarningNotice: false,
      modifyForm: {
        receiveMan: "",
        company: "",
        post: "",
        monitorId: "",
        phone: "",
        email: "",
      },
      rules: {
        receiveMan: [
          {
            pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
            message: "不支持特殊字符！",
            trigger: "blur",
          },
        ],
        company: [
          {
            pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
            message: "不支持特殊字符！",
            trigger: "blur",
          },
        ],
        post: [
          {
            pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
            message: "不支持特殊字符！",
            trigger: "blur",
          },
        ],
        phone: [
          {
            pattern: /^((13|14|15|16|17|18)[0-9]{1}\d{8})|((166|199|198)[0-9]{1}\d{7})$/,
            message: "请输入正确的手机号码！",
            trigger: "blur",
          },
        ],
        email: [
          {
            type: "email",
            message: "请输入正确的邮箱地址！",
            trigger: "blur",
          },
        ],
      },
      loading: null,
    };
  },
  methods: {
    queryWarningNotice(queryData) {
      this.loading = true;
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"page\\":{\\"currentPage\\":${queryData.currentPage},\\"pageSize\\":10},\\"moduleEnum\\":\\"00\\",\\"warningType\\":\\"${queryData.warningType}\\",\\"receivePerson\\":\\"${queryData.receivePerson}\\",\\"monitorId\\":\\"${queryData.monitorId}\\"}","serviceCode":"listWarningNoticeSetByPage","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.loading = false;
        this.pageData = {
          currentPage: null,
          count: null,
          pageSize: null,
        };
        if (res.data.parameter.page) {
          this.pageData = res.data.parameter.page;
        }
        let list = res.data.parameter.list;
        for (let i = 0; i < list.length; i++) {
          list[i].createTime = moment(list[i].createTime).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          if (list[i].warningType != "02") {
            list[i].email = list[i].email;
          } else {
            list[i].email = "";
          }
        }
        this.tableData = list;
      });
    },
    dataWarn() {
      this.warningType = "00";
      let queryData = {
        currentPage: "1",
        receivePerson: "",
        monitorId: "",
        warningType: "00",
      };
      this.queryWarningNotice(queryData);
    },
    earlyWarn() {
      this.warningType = "01";
      let queryData = {
        currentPage: "1",
        receivePerson: "",
        monitorId: "",
        warningType: "01",
      };
      this.queryWarningNotice(queryData);
    },
    search(currentPage) {
      let queryData = {
        currentPage: currentPage,
        receivePerson: this.form.receivePerson,
        monitorId: this.form.monitorId,
        warningType: this.warningType,
      };
      this.queryWarningNotice(queryData);
    },
    handleCurrentChange(val) {
      this.search(val);
    },
    set() {
      this.addWarningNotice = true;
      this.addForm = {
        receiveMan: "",
        company: "",
        post: "",
        monitorId: "",
        phone: "",
        email: "",
      };
    },
    handle() {
      this.$refs["addForm"].validate((valid) => {
        if (valid) {
          this.addWarningNotice = false;
          let queryData = {
            receiveMan: this.addForm.receiveMan,
            company: this.addForm.company,
            post: this.addForm.post,
            monitorId: this.addForm.monitorId,
            phone: this.addForm.phone,
            email: this.addForm.email,
            moduleEnum: "00",
            warningType: this.warningType,
          };
          Axios({
            url: serviceApi.KB_API,
            method: "post",
            data: `appMsg={"parameter":"{\\"receiveMan\\":\\"${queryData.receiveMan}\\",\\"company\\":\\"${queryData.company}\\",\\"post\\":\\"${queryData.post}\\",\\"monitorId\\":\\"${queryData.monitorId}\\",\\"phone\\":\\"${queryData.phone}\\",\\"email\\":\\"${queryData.email}\\",\\"moduleEnum\\":\\"${queryData.moduleEnum}\\",\\"warningType\\":\\"${queryData.warningType}\\",}","serviceCode":"addWarningNoticeSet","timestamp":"","uuid":""}`,
          }).then((res) => {
            let resultcode = res.data.resultcode;
            let message = res.data.parameter.message;
            if (resultcode == "0000") {
              this.$message({
                message: message,
                type: "success",
                duration: 1000,
                onClose: () => {
                  let queryData = {
                    currentPage: "1",
                    receivePerson: "",
                    monitorId: "",
                    warningType: this.warningType,
                  };
                  this.queryWarningNotice(queryData);
                },
              });
            } else {
              this.$message({
                message: message,
                type: "warning",
              });
            }
          });
        }
      });
    },
    modify(row) {
      this.modifyWarningNotice = true;
      this.modifyForm = Object.assign({}, row);
      this.modifyForm.monitorId = Number(row.monitorId);
    },
    handle2() {
      this.$refs["modifyForm"].validate((valid) => {
        if (valid) {
          this.modifyWarningNotice = false;
          let queryData = {
            receiveMan: this.modifyForm.receiveMan,
            company: this.modifyForm.company,
            post: this.modifyForm.post,
            monitorId: this.modifyForm.monitorId,
            phone: this.modifyForm.phone,
            email: this.modifyForm.email,
            moduleEnum: "00",
            warningType: this.warningType,
            id: this.modifyForm.id,
          };
          Axios({
            url: serviceApi.KB_API,
            method: "post",
            data: `appMsg={"parameter":"{\\"receiveMan\\":\\"${queryData.receiveMan}\\",\\"company\\":\\"${queryData.company}\\",\\"post\\":\\"${queryData.post}\\",\\"monitorId\\":\\"${queryData.monitorId}\\",\\"phone\\":\\"${queryData.phone}\\",\\"email\\":\\"${queryData.email}\\",\\"moduleEnum\\":\\"${queryData.moduleEnum}\\",\\"warningType\\":\\"${queryData.warningType}\\",\\"id\\":\\"${queryData.id}\\"}","serviceCode":"updateWarningNoticeSet","timestamp":"","uuid":""}`,
          }).then((res) => {
            let resultcode = res.data.resultcode;
            let message = res.data.parameter.message;
            if (resultcode == "0000") {
              this.$message({
                message: message,
                type: "success",
                duration: 1000,
                onClose: () => {
                  let queryData = {
                    currentPage: "1",
                    receivePerson: "",
                    monitorId: "",
                    warningType: this.warningType,
                  };
                  this.queryWarningNotice(queryData);
                },
              });
            } else {
              this.$message({
                message: message,
                type: "warning",
              });
            }
          });
        }
      });
    },
    del(row) {
      this.$confirm("您确定要删除该条数据吗？", "删除预警通知", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          Axios({
            url: serviceApi.KB_API,
            method: "post",
            data: `appMsg={"parameter":"{\\"warningnoticeId\\":\\"${row.id}\\"}","serviceCode":"deleteWarningNoticeSet","timestamp":"","uuid":""}`,
          }).then((res) => {
            let message = res.data.parameter.message;
            this.$message({
              type: "success",
              message: message,
              duration: 1000,
              onClose: () => {
                let queryData = {
                  currentPage: "1",
                  receivePerson: "",
                  monitorId: "",
                  warningType: this.warningType,
                };
                this.queryWarningNotice(queryData);
              },
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消删除!",
          });
        });
    },
  },
  created() {
    let fun = async () => {
      await Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"type\\":\\"2\\"}","serviceCode":"querySelect","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.monitorList = res.data.parameter.list;
      });
      let queryData = {
        currentPage: "1",
        receivePerson: "",
        monitorId: "",
        warningType: "00",
      };
      this.queryWarningNotice(queryData);
    };
    fun();
  },
};
</script>

<style lang="less" scoped>
</style>